<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<aside class="aside-md bg-light dk" id="sidebar">
	<!-- 右侧连接栏 -->
	<section class="vbox animated fadeInRight">
		<section class="w-f-md scrollable hover">
			<h4 class="font-thin m-l-md m-t">Connected</h4>
			<ul class="list-group no-bg no-borders auto m-t-n-xxs">
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a1.png" alt="..." class="img-circle"> <i
						class="on b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Chris Fox</a>
						</div>
						<small class="text-muted">New York</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a2.png" alt="..."> <i
						class="on b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Amanda Conlan</a>
						</div>
						<small class="text-muted">France</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a3.png" alt="..."> <i
						class="busy b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Dan Doorack</a>
						</div>
						<small class="text-muted">Hamburg</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a4.png" alt="..."> <i
						class="away b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Lauren Taylor</a>
						</div>
						<small class="text-muted">London</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a5.png" alt="..." class="img-circle"> <i
						class="on b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Chris Fox</a>
						</div>
						<small class="text-muted">Milan</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a6.png" alt="..."> <i
						class="on b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Amanda Conlan</a>
						</div>
						<small class="text-muted">Copenhagen</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a7.png" alt="..."> <i
						class="busy b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Dan Doorack</a>
						</div>
						<small class="text-muted">Barcelona</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a8.png" alt="..."> <i
						class="away b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Lauren Taylor</a>
						</div>
						<small class="text-muted">Tokyo</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a9.png" alt="..." class="img-circle"> <i
						class="on b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Chris Fox</a>
						</div>
						<small class="text-muted">UK</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a1.png" alt="..."> <i
						class="on b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Amanda Conlan</a>
						</div>
						<small class="text-muted">Africa</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a2.png" alt="..."> <i
						class="busy b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Dan Doorack</a>
						</div>
						<small class="text-muted">Paris</small>
					</div></li>
				<li class="list-group-item"><span
					class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm"> <img
						src="images/a3.png" alt="..."> <i
						class="away b-light right sm"></i>
				</span>
					<div class="clear">
						<div>
							<a href="#">Lauren Taylor</a>
						</div>
						<small class="text-muted">Brussels</small>
					</div></li>
			</ul>
		</section>
		<footer class="footer footer-md bg-black">
			<form class="" role="search">
				<div class="form-group clearfix m-b-none">
					<div class="input-group m-t m-b">
						<span class="input-group-btn">
							<button type="submit"
								class="btn btn-sm bg-empty text-muted btn-icon">
								<i class="fa fa-search"></i>
							</button>
						</span> <input type="text"
							class="form-control input-sm text-white bg-empty b-b b-dark no-border"
							placeholder="Search members">
					</div>
				</div>
			</form>
		</footer>
	</section>
</aside>
